<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>添加指标组合</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="screen-orientation" content="portrait" />
    <!-- <link rel="stylesheet" href="../Resources/css/mui.css"> -->
    <link rel="stylesheet" href="/Resources/2.0/css/public.css">
    <script src="/Resources/2.0/js/size.js"></script>


</head>

<body>
    <div class="aim flexall" id="app">
        <div class="aim-input-name flexall-hor">
            <div class="label">
                标题名称：
            </div>
            <div class="label-content flex">
                <input type="text" placeholder="请输入组合指标名称">
            </div>
        </div>
        <div class="search flexall-hor">
            <div class="back">
                <i class="icon icon-back"></i>
            </div>
            <div class="search-input flex">
                <div class="search-input-inner">
                    <i class="icon icon-search"></i>
                    <input type="text">
                    <i class="icon icon-clear"></i>
                </div>
            </div>
            <a href="javascript:;" class="search-handle">
                搜索
            </a>
        </div>
        <div class="fixed-header">
            <table class="aim-table aim-table-default">
                <thead>
                    <tr>
                        <th>
                            <div class="fit-cell"></div>
                            <div class="cell-text">选择</div>
                        </th>
                        <th>
                            <div class="fit-cell"></div>
                            <div class="cell-text">指标名称</div>
                        </th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="flex scroll-body">
            <table class="aim-table aim-table-default">
                <thead>
                    <tr>
                        <th style="width:0.5rem">选择</th>
                        <th>指标名称</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比1
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比2
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比1
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比2
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比1
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比2
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比1
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比2
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比2
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                           <div class="toggle-handle toggle-radio">
                                <i class="icon icon-radio"></i>
                            </div>
                        </td>
                        <td>
                            <div>
                                看涨比21
                            </div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="aim-bottom-btn">
            <a href="javascript:;" class="btn-operate btn-active btn-save">
                保 存
            </a>
        </div>

    </div>


    <script src="/Resources/2.0/js/zepto.js"></script>
    <script src="/Resources/2.0/js/mui.min.js"></script>
    <!-- <script src="/Resources/2.0/js/zepto.animate.basic.js"></script> -->
    <!-- <script src="/Resources/2.0/js/zepto.animate.js"></script> -->
    <script src="/Resources/2.0/js/public.js"></script>

    <script>
        // 单选
        mui('.aim-table').on('tap', '.toggle-radio', function () {
            Zepto(this).closest('tr').toggleClass('active');
            Zepto(this).find('.icon-radio').toggleClass('active')
        })
    </script>


</body>

</html>